<template>
  <div class="box">
    <div><h2>SkateStore注册</h2></div>
    <div class="loginfrom">
      <el-form :label-position="labelPosition" :model="formLabelAlign">
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="formLabelAlign.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确定密码">
          <el-input
            type="password"
            v-model="formLabelAlign.spassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formLabelAlign.email"></el-input>
        </el-form-item>

        <el-row>
          <el-button type="info" class="register2" @click="register()">
            注册
          </el-button>
        </el-row>
        <!-- 空白占位 -->
        <div class="placeholder"><span></span></div>
        <div><a href="../index">返回SkateStore首页</a></div>
      </el-form>
      <div class="kongbai"><span></span></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        email: "",
        username: "",
        password: "",
        spassword: "",
      },
    };
  },
  methods: {
    register() {
      //发送请求到后台
      axios
        .post("http://localhost:8081/home/register", this.formLabelAlign)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200 && res.data.msg == "success") {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.$router.push({ path: "/login" });
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        });
    },
  },
};
</script>
<style>
.box {
  margin-top: 60px;
}
.loginfrom {
  margin: 0 auto;
  width: 300px;
}
.placeholder {
  height: 100px;
}
.land {
  size: medium;
}
button.el-button.register2.el-button--info {
  margin-top: 60px;
  width: 300px;
  height: 60px;
}
</style>